<template>
    <div class="container bg-gray">
        <city-selector v-model="formData.areasName" @onSelectedAddrTextChange="onSelectedAddrTextChange" :visible="isSelectCity" @on-visible-change="onVisibleChange"></city-selector>
        <div class="form-items fz30">
          <label class="form-item flex border-b">
                <div class="txt333">
                    地址类型：
                </div>
                <div class="flex-con txt666">
                    {{addrTypeList[formData.type]||'请选择地址类型'}}
                </div>
                <select v-model="formData.type" class="full-opacity"> 
                  <option disabled>请选择地址类型</option>
                  <option :value="key" v-for="(item,key) in addrTypeList" :key="key">{{item}}</option>
                </select>
            </label>
            <label class="form-item flex border-b">
                <div class="txt333">
                    收货人姓名：
                </div>
                <div class="flex-con txt666">
                   <input type="text"  v-model="formData.username" class="form-input-text" placeholder="请输入收货人姓名">
                </div>
            </label>
            <label class="form-item flex border-b">
                <div class="txt333">
                 手机号码：
                </div>
                <div class="flex-con txt333">
                  <input type="tel" v-model="formData.mobile" class="form-input-text" placeholder="请输入手机号码">
                </div>
            </label>
            <label class="form-item flex border-b">
                <div class="txt333">
                 邮编：
                </div>
                <div class="flex-con txt333">
                  <input type="tel"  v-model="formData.postcode" class="form-input-text" placeholder="请输入邮编">
                </div>
            </label>
             <label class="form-item flex border-b"  @click="isSelectCity=true">
                <div class="txt333">
                 所在地区：
                </div>
                <div class="flex-con txt333">
                    {{areasName||'请选择'}}
                </div>
            </label>

             <label class="form-item flex border-b"  for="address">
                <div class="flex-con txt333">
                  <textarea type="tel" id="address" v-model="formData.detailaddress" class="form-input-text" placeholder="请输入详细地址"></textarea>
                </div>
            </label>
        </div>
       
        <div class="btn-areas">
            <div class="btn-submit" @click="doSubimt">提交</div>
        </div>
         <div class="text-center bankcar-area">
              <img src="../../assets/icons/bank/cxk.png" alt="" v-if="formData.bank_type==2">
              <img src="../../assets/icons/bank/czk.png" alt="" v-if="formData.bank_type==3">
        </div>
    </div>
</template>
<script>
import citySelectorVue from "../../components/citySelector";
import { addrTypeList } from "../../config/constants";
export default {
  components: {
    "city-selector": citySelectorVue
  },
  data() {
    return {
      addrTypeList,
      formData: {
        mobile: "",
        type: ""
      },
      areasName: "",
      isSelectCity: false
    };
  },

  created() {
    let id = this.$route.query.id;
    if (id) {
      this.$post("/api/user/address/find", { id }).then(data => {
        this.formData = data;
      });
    } else {
      this.$get("/api/user/get_mobile").then(data => {
        this.formData.mobile = data;
      });
    }
  },
  methods: {
    onVisibleChange(v) {
      this.isSelectCity = v;
    },
    onSelectedAddrTextChange(titles) {
      this.areasName = titles.join(" ");
    },
    doSubimt() {
      if (this.formData.type === "") {
        this.$toast("请选择地址类型");
        return;
      }
      if (this.$assert("isEmpty", this.formData.username, "请填写收货人")) {
        return;
      }
      if (this.$assert("isEmpty", this.formData.mobile, "请填写联系电话")) {
        return;
      }

      if (this.isEmpty(this.areasName)) {
        this.$toast("请选择地区");
        return;
      }
      if (this.isEmpty(this.formData.detailaddress)) {
        this.$toast("请填写详细地址");
        return;
      }

      this.formData.fulladdress =
        this.areasName.replace(/\s/g, "") + this.formData.detailaddress;

      this.showLoading();
      this.formData.areasName = this.areasName;
      let url = "/api/user/address/modify";
      if (!this.$route.query.id) {
        url = "/api/user/addNewAddr";
      }
      this.$post(url, this.formData)
        .then(res => {
          this.$toast("添加地址成功");
          this.$router.go(-1);
          this.hideLoading();
        })
        .catch(res => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/form.scss";
.bankcar-area {
  padding-top: 2rem;
  img {
    width: 7.5rem;
  }
}
#address {
  width: 100%;
  height: 2rem;
  border: none;
  outline: none;
  font-size: 0.4rem;
}
</style>
